<script setup lang="ts">
import { h, onMounted, reactive, shallowRef, useTemplateRef } from 'vue'
import XyIcon, { XyIconRender } from '@/components/XyIcon'

const cascaderData = [
  {
    label: '选项1',
    value: '1',
    children: [
      {
        label: '选项1-1',
        value: '1-1'
      }
    ]
  },
  {
    label: '选项2',
    value: '2',
    children: [
      {
        label: '选项2-1',
        value: '2-1'
      },
      {
        label: '选项2-2',
        value: '2-2'
      },
      {
        label: '选项2-3',
        value: '2-3'
      }
    ]
  }
]

const formList = reactive<FormList>([
  {
    type: 'card.tag',
    label: '输入框'
  },
  {
    label: 'input框',
    prop: 'input1',
    type: 'input',
    colspan: 2,
    value: '默认值',
    autofocus: true,
    onChange() {},
    onInput() {},
    placeholder: '请输入姓名',
    rule: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    prepend: ({ c }) => h('div', c.label),
    append: '123',
    header: () => h(XyIcon, { icon: 'ep:user-filled' }),
    footer: () => h('div', { style: { color: 'var(--el-color-success-light-5)' } }, '姓名尾部'),
    description: '解释文案'
  },
  {
    label: '文本域',
    prop: 'input2',
    type: 'textarea',
    maxlength: 20,
    value: '默认值',
    showWordLimit: true,
    placeholder: '请输入姓名',
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '密码框',
    prop: 'input3',
    type: 'input',
    value: '默认值',
    showPassword: true,
    maxlength: 20,
    showWordLimit: true,
    placeholder: '请输入姓名',
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '标签输入框',
    type: 'card.divider'
  },
  {
    label: '标签输入框',
    prop: 'inputTag1',
    type: 'inputTag',
    onChange({ value, c, formData }) {
      console.log(value, c, formData)
    },
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '标签输入框类型效果',
    prop: 'inputTag2',
    type: 'inputTag',
    tagType: 'success',
    draggable: true,
    value: ['tag1', 'tag2', 'tag3'],
    tagEffect: 'plain'
  },
  {
    label: '标签输入框插槽',
    prop: 'inputTag3',
    type: 'inputTag',
    max: 3,
    tag: ({ value }) => {
      return h('div', { style: { color: 'red' } }, value)
    },
    header: () => h(XyIcon, { icon: 'ep:edit' }),
    footer: '123'
  },
  {
    label: '数字输入框',
    type: 'card.tag'
  },
  {
    label: '数字输入框',
    prop: 'inputNumber1',
    type: 'inputNumber',
    min: 0,
    max: 10,
    step: 2,
    onChange(value) {
      console.log(value)
    },
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '数字输入框限制值',
    prop: 'inputNumber2',
    type: 'inputNumber',
    min: 0,
    max: 10,
    step: 2,
    stepStrictly: true,
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '数字输入框控制器位置',
    prop: 'inputNumber3',
    type: 'inputNumber',
    min: 0,
    max: 10,
    step: 2,
    precision: 2,
    controlsPosition: 'right',
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '数字输入框插槽',
    prop: 'inputNumber4',
    type: 'inputNumber',
    rule: [{ required: true, trigger: 'blur' }],
    header: '∮',
    footer: 'RMB',
    prepend: '🔽',
    append: '🔼'
  },
  {
    label: '下拉框',
    type: 'card.divider'
  },
  {
    label: '普通',
    prop: 'select1',
    type: 'select',
    value: 1,
    data: [
      {
        label: '选项1',
        value: 1,
        default: c => h('div', { style: { color: 'red' } }, c.label)
      },
      { label: '选项2', value: 2 },
      { label: '选项3', value: 3 }
    ],
    header: () => h('div', { style: { color: 'red' } }, 'header'),
    footer: () => h('div', { style: { color: 'red' } }, 'footer'),
    prepend: () => h('div', '前缀'),
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '多选',
    prop: 'select2',
    type: 'select',
    multiple: true,
    maxCollapseTags: 3,
    multipleLimit: 4,
    value: [1],
    data: [
      {
        label: '选项1',
        value: 1,
        default: c => h('div', { style: { color: 'red' } }, c.label)
      },
      { label: '选项2', value: 2 },
      { label: '选项3', value: 3 },
      { label: '选项4', value: 4 },
      { label: '选项5', value: 5 }
    ],
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '普通搜索',
    prop: 'select3',
    type: 'select',
    filterable: true,
    value: 1,
    data: [
      {
        label: '选项1',
        value: 1,
        default: c => h('div', { style: { color: 'red' } }, c.label)
      },
      { label: '选项2', value: 2 },
      { label: '选项3', value: 3 }
    ],
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '远程搜索',
    prop: 'select4',
    type: 'select',
    data: [],
    multiple: true,
    value: [1],
    rule: [{ required: true, trigger: 'blur' }],
    filterMethod: ({ value, c }) => {
      if (!value) return
      c.loading = true
      setTimeout(() => {
        c.loading = false
        c.data = [
          { label: '远程选项1', value: 1 },
          { label: '远程选项2', value: 2 },
          { label: '远程选项3', value: 3 },
          { label: '远程选项4', value: 4 },
          { label: '远程选项5', value: 5 }
        ]
      }, 2000)
    }
  },
  {
    label: '对象作为value',
    prop: 'select5',
    type: 'select',
    valueKey: 'value',
    value: { label: '选项4', value: 4 },
    data: [
      {
        label: '选项1',
        value: 1,
        default: c => h('div', { style: { color: 'red' } }, c.label)
      },
      { label: '选项2', value: 2 },
      { label: '选项3', value: 3 },
      { label: '选项4', value: 4 }
    ],
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '创建选项',
    prop: 'select6',
    type: 'select',
    multiple: true,
    filterable: true,
    allowCreate: true,
    value: [1],
    data: [
      {
        label: '选项1',
        value: 1,
        default: c => h('div', { style: { color: 'red' } }, c.label)
      },
      { label: '选项2', value: 2 },
      { label: '选项3', value: 3 }
    ],
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '日期选择器',
    type: 'card.divider'
  },
  {
    label: '单个年',
    prop: 'year',
    type: 'year',
    defaultValue: new Date(1994, 1, 1),
    disabledDate: ({ value }) => value.getTime() > Date.now()
  },
  {
    label: '多个年',
    prop: 'years',
    type: 'years',
    defaultValue: new Date(2010, 1, 1)
  },
  {
    label: '年-年',
    prop: 'yearrange',
    type: 'yearrange'
  },
  {
    label: '单个年月',
    prop: 'month',
    type: 'month',
    prefixIcon: h(XyIcon, { icon: 'ep:user-filled' }),
    short: true
  },
  {
    label: '多个年月',
    prop: 'months',
    type: 'months',
    prefixIcon: h(XyIcon, { icon: 'ep:user-filled' }),
    short: true
  },
  {
    label: '年月-年月',
    prop: 'monthrange',
    type: 'monthrange',
    startPlaceholder: '开始年月',
    endPlaceholder: '结束年月'
  },
  {
    label: '年周',
    prop: 'week',
    type: 'week'
  },
  {
    label: '单个年月日',
    prop: 'date',
    type: 'date',
    default: ({ value }) => {
      return h('div', { class: 'cell', style: { color: 'red' } }, value.text)
    },
    shortcuts: [
      {
        text: '今天',
        value: new Date()
      },
      {
        text: '昨天',
        value: () => {
          const date = new Date()
          date.setTime(date.getTime() - 3600 * 1000 * 24)
          return date
        }
      },
      {
        text: '一周前',
        value: () => {
          const date = new Date()
          date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
          return date
        }
      }
    ]
  },
  {
    label: '多个年月日',
    prop: 'dates',
    type: 'dates',
    dateFormatCharacter: ':',
    disabledDate: ({ value }) => value.getTime() > Date.now()
  },
  {
    label: '年月日-年月日',
    prop: 'daterange',
    type: 'daterange',
    rangeSeparator: '-'
  },
  {
    label: '年月日时间',
    prop: 'datetime',
    type: 'datetime',
    defaultTime: new Date(1994, 1, 1, 12, 12, 12),
    short: true,
    format: 'YYYY/MM/DD HH/mm/ss',
    valueFormat: 'YYYY/MM/DD HH:mm:ss'
  },
  {
    label: '年月日时间-年月日时间',
    prop: 'datetimerange',
    type: 'datetimerange'
  },
  {
    label: '多选',
    type: 'card.tag'
  },
  {
    label: '普通',
    prop: 'checkbox1',
    type: 'checkbox',
    data: [
      { label: '选项1', value: 1, disabled: true },
      { label: '选项2', value: 2 },
      { label: '选项3', value: 3 }
    ],
    value: [],
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '按钮',
    prop: 'checkbox2',
    value: [1],
    type: 'checkbox.button',
    data: [
      { label: '选项1', value: 1 },
      { label: '选项2', value: 2 },
      { label: '选项3', value: 3 }
    ],
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '普通（全部）',
    prop: 'checkbox3',
    value: [2],
    type: 'checkboxGroup',
    onChange() {},
    data: [
      { label: '选项1', value: 1 },
      { label: '选项2', value: 2 },
      { label: '选项3', value: 3 }
    ],
    colspan: 1,
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '按钮（全部）',
    prop: 'checkbox4',
    value: [1],
    6: [2],
    disabled: true,
    type: 'checkboxGroup.button',
    data: [
      { label: '选项1', value: 1 },
      { label: '选项2', value: 2 },
      { label: '选项3', value: 3 }
    ],
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '单选',
    type: 'card.divider'
  },
  {
    label: '单选',
    prop: 'radio1',
    type: 'radio',
    value: '1',
    data: [
      { label: '选项1', value: '1' },
      { label: '选项2', value: '2' },
      {
        label: '选项3',
        value: '3',
        default: c => h('div', { style: { color: 'red' } }, c.label)
      }
    ],
    onChange() {},
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '按钮',
    prop: 'radio2',
    type: 'radio.button',
    value: '1',
    data: [
      { label: '选项1', value: '1' },
      { label: '选项2', value: '2' },
      { label: '选项3', value: '3' }
    ],
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '开关',
    type: 'card.divider'
  },
  {
    label: '开关',
    prop: 'switch1',
    type: 'switch',
    value: '1',
    data: [
      { label: '选项1', value: '1' },
      { label: '选项2', value: '2' }
    ],
    onChange() {},
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '开关内显示文案',
    prop: 'switch2',
    type: 'switch',
    value: '1',
    width: 80,
    inlinePrompt: true,
    data: [
      { label: '选项1', value: '1' },
      { label: '选项2', value: '2' }
    ],
    onChange() {},
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '开关图标',
    prop: 'switch3',
    type: 'switch',
    value: '1',
    data: [
      {
        label: '选项1',
        value: '1',
        icon: shallowRef(XyIconRender('ep/user-filled')),
        actionIcon: h(XyIcon, { icon: 'ep:edit' })
      },
      { label: '选项2', value: '2', icon: h(XyIcon, { icon: 'ep:edit' }), actionIcon: h(XyIcon, { icon: 'ep:delete' }) }
    ],
    onChange() {},
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '级联',
    type: 'card.divider'
  },
  {
    label: '级联选择器',
    prop: 'cascader1',
    type: 'cascader',
    data: cascaderData
  },
  {
    label: '多选级联选择器',
    prop: 'cascader2',
    type: 'cascader',
    maxCollapseTags: 1,
    props: {
      multiple: true
    },
    data: cascaderData
  },
  {
    label: '级联搜索',
    prop: 'cascader3',
    type: 'cascader',
    filterable: true,
    filterMethod({ node, value, c, formData }) {
      console.log(node, value, c, formData)
      return true
    },
    data: cascaderData
  },
  {
    label: '懒加载级联选择器',
    prop: 'cascader4',
    type: 'cascader',
    props: {
      lazy: true,
      lazyLoad: (node, resolve) => {
        const { level } = node
        setTimeout(() => {
          const nodes = Array.from({ length: level + 1 }).map((_, i) => ({
            value: Date.now(),
            label: `选项-${i + 1}`,
            leaf: level >= 2
          }))
          resolve(nodes)
        }, 1000)
      }
    }
  },
  {
    label: '级联面板',
    prop: 'cascaderPanel1',
    type: 'cascaderPanel',
    data: cascaderData,
    colspan: 2,
    onChange(value) {
      console.log(value)
    }
  },
  {
    label: '多选级联面板',
    prop: 'cascaderPanel1',
    type: 'cascaderPanel',
    data: cascaderData,
    colspan: 2,
    props: {
      multiple: true
    }
  },
  {
    label: '时间选择器',
    type: 'card.divider'
  },
  {
    label: '时间选择器',
    prop: 'time1',
    type: 'time',
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '时间范围选择器',
    prop: 'time2',
    type: 'timerange',
    value: ['12:12:12', '13:13:13'],
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '时间选择器插槽',
    prop: 'time3',
    type: 'time',
    defaultValue: new Date(2022, 12, 12, 10, 10, 10),
    prefixIcon: h(XyIcon, { icon: 'ep:edit' })
  },
  {
    label: '时间选择器禁用',
    prop: 'time4',
    type: 'time',
    disabledHours(a) {
      console.log(a)
      return [1, 2, 3]
    },
    disabledMinutes(a, b) {
      console.log(a, b)
      return [1, 2, 3]
    },
    disabledSeconds(a, b, c) {
      console.log(a, b, c)
      return [1, 2, 3]
    }
  },
  {
    label: '树形选择',
    type: 'card.divider'
  },
  {
    label: '树形选择',
    prop: 'treeSelect1',
    type: 'treeSelect',
    data: cascaderData,
    icon: shallowRef(XyIconRender('ep:user-filled'))
  },
  {
    label: '树形选择展示多选框',
    prop: 'treeSelect2',
    type: 'treeSelect',
    value: '1-1',
    data: cascaderData,
    showCheckbox: true
  },
  {
    label: '树形选择多选',
    prop: 'treeSelect3',
    type: 'treeSelect',
    defaultExpandedKeys: ['1-1'],
    data: cascaderData,
    maxCollapseTags: 1,
    multiple: true,
    multipleLimit: 2
  },
  {
    label: '树形选择任意一级',
    prop: 'treeSelect4',
    type: 'treeSelect',
    data: cascaderData,
    checkStrictly: true
  },
  {
    label: '树形选择自定义搜索',
    prop: 'treeSelect5',
    type: 'treeSelect',
    data: cascaderData,
    filterNodeMethod({ value, data }) {
      if (!value) return true
      return data.label.includes(String(value))
    }
  },
  {
    label: '树形选择懒加载',
    prop: 'treeSelect6',
    type: 'treeSelect',
    props: {
      label: 'label',
      children: 'zones',
      isLeaf: 'leaf'
    },
    load({ node, resolve, reject, c, formData }) {
      console.log(node)
      console.log(resolve)
      console.log(reject)
      console.log(c, formData)
      setTimeout(() => {
        if (node.level === 0) {
          return resolve([{ label: '顶级', value: 1 }])
        }
        if (node.level > 2) return resolve([])
        resolve(cascaderData)
      }, 2000)
    }
  },
  {
    label: '树形选择插槽',
    prop: 'treeSelect7',
    type: 'treeSelect',
    data: cascaderData,
    default({ node, data }) {
      console.log(data)
      return h('div', { style: { color: 'red' } }, node.label)
    }
  },
  {
    label: '树形选择节点拖拽',
    prop: 'treeSelect8',
    type: 'treeSelect',
    data: cascaderData,
    draggable: true
  },
  {
    label: '上传',
    type: 'card'
  },
  {
    label: '多文件上传',
    type: 'upload.img',
    prop: 'img1',
    multiple: true
    // rule: [{ required: true, trigger: 'change' }]
  },
  {
    label: '上传禁用',
    type: 'upload.img',
    prop: 'img2',
    disabled: true,
    value: [{ name: '哈哈哈哈😄', url: 'https://ww2.sinaimg.cn/mw690/005wNqg5ly3ht4k4kcb90j30oo17vjyb.jpg' }]
  },
  {
    label: '限制上传格式及大小',
    type: 'upload.video',
    prop: 'video1',
    value: [{ name: '哈哈哈哈😄', url: 'http://vjs.zencdn.net/v/oceans.mp4' }],
    accept: ['video/mp4'],
    fileSize: 100
  },
  {
    label: '视频第一帧',
    type: 'upload.video',
    prop: 'video2',
    videoFirstFrame: true
  },
  {
    label: '限制上传个数',
    type: 'upload.file',
    prop: 'file1',
    limit: 2
  },
  {
    label: '拖拽上传',
    type: 'upload.file',
    prop: 'file2',
    drag: true
  },
  {
    label: '上传提示文字',
    type: 'upload.video',
    prop: 'video3',
    drag: true,
    tip: () => h('div', { style: { color: 'red' } }, '只能上传jpg/png文件，且不超过500kb')
  },
  {
    label: '插槽',
    type: 'card'
  },
  {
    label: '普通插槽',
    type: 'slot',
    prop: 'slot1'
  },
  {
    label: '插槽h函数',
    type: 'slot.formItem',
    prop: 'slot2',
    default() {
      return h('div', { style: { color: 'red' } }, '插槽内容')
    }
  }
])
const buttons = {
  submitIcon: h(XyIcon, { icon: 'material-symbols:save' }),
  resetIcon: h(XyIcon, { icon: 'bx:reset' })
}
const submitForm = async ({ formData, loading, setBtnLoading }: FormEventParams) => {
  loading.value = true
  await new Promise(r => setTimeout(r, 1500))
  setBtnLoading(false)
  console.log(formData)
}
const addFormRef = useTemplateRef('addFormRef')
onMounted(async () => {
  const a = await addFormRef.value?.getFormRef?.()
  console.log(a)
})
</script>

<template>
  <XyAddForm ref="addFormRef" :column="4" :buttons="buttons" :formList="formList" @submit-form="submitForm">
    <template #slot1="{ formData, c }">
      <div>{{ formData }}</div>
      <div>{{ c }}</div>
    </template>
  </XyAddForm>
</template>
<style scoped lang="scss"></style>
